<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加关键字</title>
    <link rel="stylesheet" href="__LAY__/css/layui.css" media="all">
    <link rel="stylesheet" href="__CSS__/main.css" media="all">
    <link rel="stylesheet" href="/static/wechat/css/wechat.css" media="all">
    <style>
    	.hr-line-dashed {
		    border-top: 1px dashed #e7eaec;
		    color: #fff;
		    background-color: #fff;
		    height: 1px;
		    margin: 20px 0;
		}
		.box-content {
		    background-color: #fff;
		    color: inherit;
		    padding: 15px;
		}
		.pull-left {
		    float: left!important;
		}
		.form-horizontal .form-group {
		    margin-right: -15px;
		    margin-left: -15px;
		}
		.form-group {
		    margin-bottom: 15px;
		}
		.layui-box .control-label {
		    margin: 0;
		    padding-left: 0;
		    padding-right: 0;
		}
    </style>

</head>
		<div class="ibox-content">
			<fieldset class="layui-elem-field">
				<legend>添加关键字</legend>
				<div class="mobile-preview pull-left">
				    <div class="mobile-header">公众号</div>
				    <div class="mobile-body">
				        <iframe id="phone-preview" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
				    </div>
				</div>
				<div class="row" style="min-width:800px;margin-right: -15px;margin-left: -15px;">
					<div class='col-xs-6' style="margin-left:15px; width: 50%;">
						<form class="layui-form" action=""  method="post" lay-filter="component-form-group">
							<fieldset class="layui-elem-field" style="height:580px;position:absolute;width:535px">
								<legend style="margin-bottom: 20px;">添加关键字</legend>
								<div class="layui-form-item">
									<label class="layui-form-label">关 键 字</label>
									<div class="layui-input-block">
									  <input style="width: 80%;" type="text" name="keys" lay-verify="required" placeholder="请输入关键字" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">消息类型</label>
									<div class="layui-input-inline">
								        <select name="modules" lay-verify="required" lay-search="true">
								          <option value="">请选择消息类型</option>
								          <option value="text">文字</option>
								          <option value="news">图文</option>
								          <option value="image">图片</option>
								          <option value="music">音乐</option>
								          <option value="video">视频</option>
								        </select>
								    </div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">规则内容</label>
									<div class="layui-input-block">
									  	<textarea name="content" maxlength="10000" placeholder="请输入内容" class="layui-textarea" style="width: 80%;">{$vo.content|default='说点什么吧'}</textarea>
									</div>
								</div>
								<div class="layui-form-item" style="position: absolute;bottom: 20px;width: 100%;">
									<div class="hr-line-dashed"></div>
									<div class="layui-input-block">
									  	<button class="layui-btn" lay-submit="" lay-filter="demo1">保存数据</button>
										<button data-cancel-edit class="layui-btn layui-btn-danger" type='button'>取消编辑</button>
									</div>
								</div>

							</fieldset>
						</form>
					</div>
				</div>
			</fieldset>

		</div>
<body>

</body>
<script type="text/javascript" src="__JS__/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="__LAY__/layui.js"></script>
<script type="text/javascript" src="__JS__/index.js"></script>
<script type="text/javascript" src="__JS__/jquery.form.js"></script>
<script src="https://cdn.bootcss.com/limonte-sweetalert2/7.21.1/sweetalert2.all.js"></script>

<script>
	this.$body = $('body');
	this.$body.on('click', '[data-open]', function () {
        window.location.href = $(this).attr('data-open');
    });

	 $(function () {

        /*! 取消编辑 */
        $('[data-cancel-edit]').on('click', function () {
            confirm('确定取消编辑吗？', function () {
                history.back();
            });
        });

         // 文字显示预览
        $('[name="content"]').on('change', function () {
            showReview({type: 'text', content: this.value});
        });
		  // 文字显示预览
	        // $('body').off('change', '[name="content"]').on('change', '[name="content"]', function () {
	        //     showReview({type: 'text', content: this.value});
	        // });

         function showReview(params) {
            $('#phone-preview').attr('src', '{:url("@wechat/review")}?' + $.param(params || {}));
        }
    });

</script>